<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">
<head>
	<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
	<meta http-equiv="X-UA-Compatible" content="IE=edge">
	<meta name="viewport" content="width=device-width, initial-scale=1, user-scalable=no">
	<meta name="description" content="">
	<meta name="author" content="">

	<title>主页 - 美食百家姓</title>

	<!-- Main Styles -->
	<link rel="stylesheet" href="../assets/styles/style-horizontal.min.css">
	
	<!-- Material Design Icon -->
	<link rel="stylesheet" href="../assets/fonts/material-design/css/materialdesignicons.css">

	<!-- mCustomScrollbar -->
	<link rel="stylesheet" href="../assets/plugin/mCustomScrollbar/jquery.mCustomScrollbar.min.css">

	<!-- Waves Effect -->
	<link rel="stylesheet" href="../assets/plugin/waves/waves.min.css">

	<!-- Sweet Alert -->
	<link rel="stylesheet" href="../assets/plugin/sweet-alert/sweetalert.css">

	<link rel="stylesheet" href="../assets/styles/style.css">

</head>

<body>
<header class="fixed-header">
	<div class="header-top">
		<div class="container">
			<div class="pull-left">
				<a th:href="@{/index/(username=${username})}" class="logo"><i class="ico mdi mdi-cube-outline"></i>美食百家姓</a>
			</div>
			<!-- /.pull-left -->
			<div class="pull-right">
				<div class="ico-item hidden-on-desktop">
					<button type="button" class="menu-button js__menu_button fa fa-bars waves-effect waves-light"></button>
				</div>
				<!-- /.ico-item hidden-on-desktop -->
				<div class="ico-item">
					<a href="#" class="ico-item mdi mdi-magnify js__toggle_open" data-target="#searchform-header"></a>
					<form action="#" id="searchform-header" class="searchform js__toggle"><input type="search" placeholder="Search..." class="input-search"><button class="mdi mdi-magnify button-search" type="submit"></button></form>
					<!-- /.searchform -->
				</div>
				<!-- /.ico-item -->
				<div class="ico-item">
					<a href="#" class="ico-item mdi mdi-account js__toggle_open" data-target="#user-status"></a>
					<div id="user-status" class="user-status js__toggle">
						<a href="#" class="avatar"><img src="../assets/images/avatar.png" alt=""><span class="status online"></span></a>
						<h5 class="name" id="sal-prompt"><a href="#" th:text="${username}"></a></h5>
						<h5 class="position">Administrator</h5>
						<!-- /.name -->
						<div class="control-items">
							<div class="control-item"><a id="setting" href="#" title="Settings"><i class="fa fa-gear"></i></a></div>
							<div class="control-item">
								<a href="#" class="js__logout" title="Log out">
									<i class="fa fa-power-off"></i>
								</a>
							</div>
						</div>
						<!-- /.control-items -->
					</div>
					<!-- /#user-status -->
				</div>
				<!-- /.ico-item -->
			</div>
			<!-- /.pull-right -->
		</div>
		<!-- /.container -->
	</div>
	<!-- /.header-top -->
	<nav class="nav-horizontal">
		<button type="button" class="menu-close hidden-on-desktop js__close_menu"><i class="fa fa-times"></i><span>CLOSE</span></button>
		<div class="container">
			<ul class="menu">
				<li class="current">
					<a th:href="@{/index/(username=${username})}"><i class="ico mdi mdi-home"></i><span>主页</span></a>
				</li>
				<li class="current">
					<a th:href="@{/recommend/(username=${username})}"><i class="fa fa-area-chart" style="margin-right: 8px;"></i><span>推荐</span></a>
				</li>
				<li class="current">
					<a th:href="@{/preference/(username=${username})}"><i class="fa fa-cogs" style="margin-right: 8px;"></i><span>偏好设置</span></a>
				</li>
			</ul>
			<!-- /.menu -->
		</div>
		<!-- /.container -->
	</nav>
	<!-- /.nav-horizontal -->
</header>
<!-- /.fixed-header -->
<div style="width: 100%;height: 120px;"></div>
<div class="chart_body">
	<div class="base_chart chart1">
		<h4 class="title_style">实时消费概况</h4>
		<div id="real-time-flot-chart" class="flot-chart" style="height: 320px"></div>
	</div>
	<div class="the_row">
		<div class="base_chart chart2" style="margin-right: -1px;">
			<div id="chart_container" style="height: 400px;width: 45%;"></div>
		</div>
		<div class="base_chart chart2">
			<div id="map_container" style="height: 400px;width: 45%;"></div>
		</div>
	</div>
</div>

<div class="popOutBg"></div>
<div class="popOut">
	<span title="关闭"></span>
	<form class="form" onSubmit="return false" autocomplete="off">
		<div class="form-inner">
			<h2>个人信息</h2>
			<div class="input-wrapper">
				<label for="login-username">用户名</label>
				<div class="input-group">
					<input type="text" id="user-username" data-lpignore="true">
				</div>
			</div>
			<div class="input-wrapper">
				<label for="login-password">密码</label>
				<div class="input-group">
					<input type="password" id="user-password" data-lpignore="true">
				</div>
			</div>
			<div class="input-wrapper">
				<label for="login-username">性别</label>
				<div class="input-group">
					<input type="text" id="user-sex" data-lpignore="true">
				</div>
			</div>
			<div class="input-wrapper">
				<label for="login-username">个人描述</label>
				<div class="input-group">
					<input type="text" id="user-des" data-lpignore="true">
				</div>
			</div>
			<div class="my-btn">
				<button id="change" class="btn btn--primary">确&ensp;&ensp;定</button>
			</div>
		</div>
	</form>
</div>

	<!-- Placed at the end of the document so the pages load faster -->
	<script src="../assets/scripts/jquery.min.js"></script>
	<script src="../../assets/scripts/jquery.cookie.js"></script>
	<script src="../assets/scripts/modernizr.min.js"></script>
	<script src="../assets/plugin/bootstrap/js/bootstrap.min.js"></script>
	<script src="../assets/plugin/mCustomScrollbar/jquery.mCustomScrollbar.concat.min.js"></script>
	<script src="../assets/plugin/nprogress/nprogress.js"></script>
	<script src="../assets/plugin/sweet-alert/sweetalert.min.js"></script>
	<script src="../assets/plugin/waves/waves.min.js"></script>
	<script src="../assets/scripts/sweetalert.init.min.js"></script>

	<!-- Flot Chart -->
	<script src="../assets/plugin/chart/plot/jquery.flot.min.js"></script>
	<script src="../assets/plugin/chart/plot/jquery.flot.tooltip.min.js"></script>
	<script src="../assets/plugin/chart/plot/jquery.flot.stack.min.js"></script>
	<script src="../assets/scripts/chart.flot.init.min.js"></script>
	<script src="../assets/scripts/echarts.min.js"></script>
	<script src="../js/china.json"></script>
	<script>
		getChart();
		getChinaMap();

		/**
		 * 今日美食热榜
		 */
		function getChart(){
			let dom = document.getElementById('chart_container');
			let myChart = echarts.init(dom, null, {
				renderer: 'canvas',
				useDirtyRect: false
			});
			//请求热度榜数据
			$.ajax({
				type : 'get',
				url: "/top10heat",
				dataType: 'json',
				success: function (res) {
					let dataX = [];
					let dataY = [];
					res.forEach(e=>{
						dataX.unshift(e.heat);
						dataY.unshift(e.name);
					});
					let option = {
						title: {
							text: '今日美食热榜'
						},
						tooltip: {
							trigger: 'axis',
							axisPointer: {
								type: 'shadow'
							}
						},
						legend: {},
						grid: {
							left: '3%',
							right: '4%',
							bottom: '3%',
							containLabel: true
						},
						xAxis: {
							type: 'value',
							boundaryGap: [0, 0.01]
						},
						yAxis: {
							type: 'category',
							data: dataY
						},
						series: [
							{
								type: 'bar',
								data: dataX
							},
						]
					};
					if (option && typeof option === 'object') {
						myChart.setOption(option);
					}
				},
				error: function (err) {
					alert("数据加载失败");
				}
			});
			window.addEventListener('resize', myChart.resize);
		}

		/**
		 * 全国美食热度分布
		 */
		function getChinaMap(){
			let dom2 = document.getElementById('map_container');
			let mEcharts = echarts.init(dom2);
			//请求城市热度
			$.ajax({
				type: 'get',
				url: "/areaHeat",
				dataType: 'json',
				success:function (res) {
					// 每个城市的热度
					let DataPM = res;
					let china_json = china;
					// echarts全局注册中国地图
					echarts.registerMap('china', china_json)
					let option2;
					option2 = {
						title:{
							text:"全国美食热度分布"
						},
						geo: {
							// 类型为地图
							type: 'map',
							// 地图的数据，必须和echarts全局中注册的china名称一致
							map: 'china',
							// 显示地图各个省份的名称
							label: {
								show: true
							},
							// 地图的缩放比例
							zoom:1,
							// 设置允许拖动缩放
							roam: true,
							// 以经纬度作为地图的中心点
							// center: [121.509062, 25.044332]
						},
						series: [
							{
								// 每个省的美食热度
								data: DataPM,
								// 将美食热度数据和geo进行关联
								geoIndex: 0,
								// 关联的类型
								type: 'map'
							},
						],
						//
						visualMap: {
							// 指定最小值
							min: 0,
							// 指定最大值
							max: 1000,
							// 指定空气质量变化的颜色
							inRange: {
								color: ['white', 'red']
							},
							// 出现滑块，过滤空气质量的城市
							calculable: true
						}
					}
					// 指定配置及数据到echarts中
					if (option2 && typeof option2 === 'object') {
						mEcharts.setOption(option2);
					}
				},
				error:function (err) {
					alert("数据加载失败")
				}
			});
			window.addEventListener('resize', mEcharts.resize);
		}
	</script>
	<script src="../assets/scripts/main.min.js"></script>
	<script src="../assets/scripts/horizontal-menu.min.js"></script>
	<script type="text/javascript">
		$("#setting").click(function () {
			$(".popOut").css("display", "block");
			ani();
			$(".popOutBg").css("display", "block");
			$("#user-username").val($.cookie("user_name"));
			$("#user-password").val($.cookie("user_password"));
			$("#user-sex").val($.cookie("user_sex"));
			$("#user-des").val($.cookie("user_des"));
		});
		$(".popOut > span").click(function () {
			$(".popOut").css("display", "none");
			$(".popOutBg").css("display", "none");
		});
		$(".popOutBg").click(function () {
			$(".popOut").css("display", "none");
			$(".popOutBg").css("display", "none");
		});
		$("#change").click(function () {
			let id = $.cookie("user_id");
			let username = $("#user-username").val();
			let password = $("#user-password").val();
			let sex = $("#user-sex").val();
			let des = $("#user-des").val();
			if(username!=''&&password!=''){
				let user = {
					"id":id,
					"username":username,
					"password":password,
					"sex":sex,
					"des":des
				};
				console.log(user);
				$.ajax({
					url:"/changeUser",
					type : 'post',
					data: user,
					dataType: 'text',
					success:function (res) {
						$.cookie('user_id',user.id);
						$.cookie('user_name',user.username);
						$.cookie('user_password',user.password);
						$.cookie('user_sex',user.sex);
						$.cookie('user_des',user.des);
						alert("修改成功");
						$(".popOut").css("display", "none");
						$(".popOutBg").css("display", "none");
					},
					error:function () {
						alert("修改失败");
					}
				})
			}
		});
		function ani(){
			$(".popOut").addClass("popOut ani");
		}
	</script>
</body>
</html>
<style type="text/css">
	.title_style{
		padding-bottom: 20px;
		font-weight: 600;
	}
	.base_chart{
		background-color: #fff;
		margin: 0px 20px 20px 20px;
		padding: 20px;
		border-radius: 1%;
		box-shadow: 1px 1px 5px #ddd;
	}
	.chart2{
		/*width: fit-content;*/
	}
	.the_row{
		display: flex;
		justify-content: space-between;
	}
</style>